<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head(~{ :: title}, ~{ :: link}, ~{ ::script},~{::style})">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>商户管理平台-角色列表</title>
    <link rel="stylesheet" th:href="@{/plugins/jquery-confirm/jquery-confirm.min.css}"/>
    <!--<link rel="stylesheet" th:href="@{/plugins/zTree_v3-master/css/demo.css}">-->
    <link rel="stylesheet" th:href="@{/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css}">
    <script th:src="@{/plugins/jquery-confirm/jquery-confirm.min.js}"></script>
    <!--<script type="text/javascript" th:src="../../../js/jquery-1.4.4.min.js"></script>-->
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.core.js}"></script>
    <script th:src="@{/plugins/zTree_v3-master/js/jquery.ztree.excheck.js}"></script>
    <style></style>
</head>
<body th:replace="layout::body(~{this::section})">
<section class="content-wrapper">
    <section class="content-header">
        <h1>
            角色
            <small>列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i>商户管理平台</a></li>
            <li class="active">角色管理</li>
        </ol>
    </section>
    <section class="content">
        <div th:if="${respMsg != ''}" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> 操作提示</h4>
            <label th:text="${respMsg}"/>
        </div>
        <div class="row">
            <div th:each="opts:${session.WEBOPTS}">
                <div class="col-md-1" th:if="${opts.href == '/MpsRole/Save'}">
                    <a th:href="@{/MpsRole/goMpsRoleAdd}" class="btn btn-block btn-primary">新增</a>
                </div>
                <!--<div class="col-md-1">-->
                <!--<a href="#" class="btn btn-block btn-primary">修改</a>-->
                <!--</div>-->
                <!--<div class="col-md-1">-->
                <!--<a href="#" class="btn btn-block btn-primary">删除</a>-->
                <!--</div>-->
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align: center"><input type="checkbox"/></th>
                    <th style="text-align: center">角色名称</th>
                    <th style="text-align: center">角色备注</th>
                    <th style="text-align: center">状态</th>
                    <th style="text-align: center">排序</th>
                    <th style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody>
                <!--/*@thymesVar id="AppArticleList" type="java.util.List"*/-->
                <tr th:each="item:${MpsRoleList}" style="text-align: center">
                    <td><input type="checkbox" th:value="${item.id}"/></td>
                    <td th:text="${item.name}"></td>
                    <td th:text="${item.descr}"></td>
                    <td th:text="${item.status}"></td>
                    <td th:text="${item.sort}"></td>
                    <td>
                        <span th:each="opts:${session.WEBOPTS}">
                            <span th:if="${opts.href == '/MpsRole/Delete'}">
                                <a th:href="@{/MpsRole/Delete(id=${item.id})}"
                                   onclick="return confirm('确定删除?');">删除</a>
                            </span>
                            <span th:if="${opts.href == '/MpsRole/Update'}">
                                <a th:href="@{/MpsRole/goMpsRoleEdit(id=${item.id})}">修改</a>
                            </span>
                            <span th:if="${opts.href == '/MpsFun/setAuthority'}">
                                <!--data-toggle="modal" data-target="#myModal"-->
                                <a href="#" th:name="${item.id}" data-toggle="modal" data-target="#myModal"
                                   onclick="onLoadZTree(this,'role')">权限配置</a>
                            </span>
                             <span th:if="${opts.href == '/MpsUser/setRoleUser'}">
                                 <a href="#" th:name="${item.id}" data-toggle="modal" data-target="#myModal"
                                    onclick="onLoadZTree(this,'user')">用户配置</a>
                            </span>
                            <span th:if="${opts.href == '/MpsDept/setRoleDept'}">
                                 <a href="#" th:name="${item.id}" data-toggle="modal" data-target="#myModal"
                                    onclick="onLoadZTree(this,'dept')">部门配置</a>
                            </span>
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <input type="hidden" id="ModalRoleId">
                        <input type="hidden" id="ModalSetUrl">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">

                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-offset-4">
                            <ul id="treeFun" class="ztree"></ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"  onclick="submitDate()">
                            提交更改
                        </button>
                        <script type="application/javascript">
                            function submitDate(){
                                var role=$("#ModalRoleId").val();
                                var url=$("#ModalSetUrl").val();
                                var zTree = $.fn.zTree.getZTreeObj("treeFun");
                                var nodes = zTree.getCheckedNodes();
                                var ids = "";
                                for (var i = 0, l = nodes.length; i < l; i++) {
                                    ids += "," + nodes[i].id;
                                };
                                $.ajax({
                                    type: 'POST',//请求方式：post
                                    data: {ids: ids.substring(1),roleId:role},
                                    dataType: 'json',//数据传输格式：json
                                    url: url,
                                    error: function () {
                                        //请求失败处理函数
                                        alert('亲，请求失败！');
                                    },
                                    success: function (data) {
                                        alert('提交成功!');
                                        return;
                                    }
                                });
                            }

                        </script>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <script type="application/javascript">
            var setting = {
                check: {
                    enable: true,
                    chkboxType: {"Y": "ps", "N": "s"}
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                    }
                }
            };

            var treeNodes;
            /**
             * 加载树形结构数据
             */
            function onLoadZTree(obj,type) {
                var roleId = $(obj).attr("name");
                var getUrl="";
                var setUrl="";
                if(type=="role"){
                    $("#myModalLabel").html("权限配置");
                    getUrl="/MpsFun/mpsAllFunByRoleId?roleId=" + roleId
                    setUrl="/MpsFun/setAuthority"
                }
                if(type=="user"){
                    $("#myModalLabel").html("用户配置");
                    getUrl="/MpsUser/mpsAllUserByRoleId?id="+roleId
                    setUrl="/MpsUser/setRoleUser"
                }
                 if(type=="dept"){
                    $("#myModalLabel").html("部门配置");
                     getUrl="/MpsDept/mpsAllDeptByRoleId?id="+roleId
                     setUrl="/MpsDept/setRoleDept"
                }

                $.ajax({
                    async: false,//是否异步
                    cache: false,//是否使用缓存
                    type: 'POST',//请求方式：post
                    dataType: 'json',//数据传输格式：json
                    url: getUrl,
                    error: function () {
                        //请求失败处理函数
                        alert('亲，请求失败！');
                        treeNodes=[];
                    },
                    success: function (data) {
                        treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
                    }
                });
                $.fn.zTree.destroy();
                var t = $("#treeFun");
                t = $.fn.zTree.init(t, setting, treeNodes);
                //赋值Id
                $("#ModalRoleId").val(roleId);
                $("#ModalSetUrl").val(setUrl);
            }
        </script>
    </section>
</section>
</body>
</html>